

<template>
  <div>
<!--    <el-row>-->
<!--      <el-col :span="12">-->
<!--        <div style="width: 100%; height: 300px; background-color: blue"></div>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <div style="width: 100%; height: 300px; background-color: red"></div>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-row>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc">
          <img style="width:100% ; height: 100px" src="@/assets/logo.png" alt="">
          <div style="text-align: center">这是一段描述</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc">
          <img style="width:100% ; height: 100px" src="@/assets/logo.png" alt="">
          <div style="text-align: center">这是一段描述</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc">
          <img style="width:100% ; height: 100px" src="@/assets/logo.png" alt="">
          <div style="text-align: center">这是一段描述</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc">
          <img style="width:100% ; height: 100px" src="@/assets/logo.png" alt="">
          <div style="text-align: center">这是一段描述</div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <button>按钮</button>
        <el-button>独特的EL按钮</el-button>
        <el-button type="primary">EL主要的按钮</el-button>
        <el-button type="danger">EL报错按钮</el-button>
        <el-button type="warning">EL警告按钮</el-button>
        <el-button type="info">EL信息按钮</el-button>
        <el-button type="success">EL成功按钮</el-button>
        <el-button type="danger" circle="" icon="el-icon-delete"></el-button>
        <el-button type="primary" circle="" icon="el-icon-edit"></el-button>

      </el-col>
    </el-row>
    
    <el-row >
     <el-col >
       <el-input v-model="value" placeholder="el-input 表单输入框" style="width:200px"></el-input>
       <el-input type="textarea" v-model="value1" placeholder="el-input 表单输入框" style="width:200px"></el-input>
       <el-input show-password="" v-model="password" placeholder="请输入密码" style="width:200px"></el-input>
       <el-input v-model="value2" placeholder="el-input 表单输入框" style="width:200px" prefix-icon="el-icon-search"></el-input>
       <el-input clearable v-model="value3" placeholder="el-input 表单输入框" style="width:200px" suffix-icon="el-icon-user"></el-input>

     </el-col>
    </el-row>
    
    <el-row style="margin-top:20px">
      <el-autocomplete class="inline-input" v-model="query1" :fetch-suggestions="querySearch" placeholder="请输入内容"
                       ></el-autocomplete>
    </el-row>
    
    <el-row>
      <el-select v-model="select" placeholder="请输入" @change="changeSelect">
        <el-option
            v-for="item in country1"
            :key="item.id"
            :label="item.name"
            :value="item.name">
        </el-option>
      </el-select>
    </el-row>

    <el-row>
      <el-select v-model="select1" placeholder="请输入" @change="changeSelect1" multiple="">
        <el-option
            v-for="item in country_num"
            :key="item.number"
            :label="item.name"
            :value="item.number">
        </el-option>
      </el-select>
    </el-row>

    <el-row>
      <el-select v-model="select1" placeholder="请输入" @change="changeSelect1" filterable="">
        <el-option
            v-for="item in country_num2"
            :key="item.number"
            :label="item.label"
            :value="item.number">
        </el-option>
      </el-select>
    </el-row>

    <el-row>
      <el-radio-group v-model="radio" @change="selectRadio">
        <el-radio label="是">是</el-radio>
        <el-radio label="否">否</el-radio>
      </el-radio-group>

      <el-checkbox-group v-model="checkedCityList" @change="selectCheckbox">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>

      </el-checkbox-group>

      <el-date-picker v-model="date" type="date" placeholder="日期" value-format="yyyy-MM-dd" @change="change_date"></el-date-picker>
      <el-date-picker v-model="datetime" type="datetime" placeholder="日期时间"></el-date-picker>
      <el-date-picker v-model="date_range" type="date_range" start-placeholder="开始日期" end-placeholder="结束日期"
                      value-format="yyyy-MM-dd" @change="change_date_range"></el-date-picker>

    </el-row>

    <el-row style="margin-top: 20px">
      <el-table
          :data=table_data
          style="width: 100%"
          border=""
          :header-cell-style="{background:'aliceblue',fontsize:'16px'}">
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="故障坐标地址">
        </el-table-column>
        <el-table-column
            prop="reason"
            label="故障原因">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="delete_this(scope.row)">清除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>



  </div>
</template>

<script>
export default {
  name: "Element",
  data(){
    return{
      table_data:[{ date: '2025-03-09', name: '王小虎', address: '110.937882, 23.380321' ,reason:'火烧'},
        { date: '2025-03-12', name: '王小虎', address: '110.937882, 23.380321',reason:'挖断' }],
      value:'',
      value1:'',
      value2:'',
      value3:'',
      select:'',
      select1:'',
      password:'',
      query1:'',
      radio:'',
      checkedCityList:[],
      date:'',
      datetime:'',
      date_range:[],
      country:[{value:'1太平'},{value:'2和平'},{value:'3塘步'}],
      country1:[{name:'1太平',id:1},{name:'2和平',id:2},{name:'3塘步',id:3}],
      country_num:[{name:'1太平',number:'100'},{name:'2和平',number:'200'},{name:'3塘步',number:'300'}],
      country_num2:[{label:'1太平',number:'100'},{label:'2和平',number:'200'},{label:'3塘步',number:'300'}],

    }
  },
  methods:{
    querySearch(query, cb){  //callback
      let result = query ? this.country.filter(v => v.value.includes(query)) : this.country
      cb(result);
    },
    changeSelect(){
      console.log(this.select)
    },
    changeSelect1(){
      console.log(this.select1)
    },
    selectRadio(){
      alert(this.radio)
    },
    selectCheckbox(){
      console.log(this.checkedCityList)
    },
    change_date(){
      console.log(this.date)
    },
    change_date_range(){
      console.log(this.date_range)
    },
    delete_this(scope){
      alert(scope.address + scope.reason + '已修复');
    }
  }
}
</script>

<style scoped>

</style>